<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>系统人员</title>
	<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
	<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-panel" style="padding: 8px;">
	<fieldset class="layui-elem-field layui-border-blue">
		<legend>搜索信息</legend>
		<form class="layui-form layui-form-pane" style="margin: 20px;">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-inline">
						<input class="layui-input" type="text" name="name" autocomplete="off" />
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
							<i class="layui-icon layui-icon-search"></i>
							搜索
						</a>
					</div>
				</div>
			</div>
		</form>
	</fieldset>
	<div>
		<table id="memberTable" lay-filter="memberTable"></table>
	</div>
</div>
<script id="tool" type="text/html">
	{{# if(d.isUpdate==0){ }}
	<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
	{{# }}}
</script>
<script id="tableBar" type="text/html">
	<a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</a>
	<!--<a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </a>-->
</script>
<script id="switchState" type="text/html">
	<input type="checkbox" name="state" value="{{d.state}}"
		   lay-skin="switch" lay-text="是|否" lay-filter="checkstate" {{d.state==0?"checked":""}} />
</script>
<script id="photo" type="text/html">
	{{# if(d.isUpdate==0){ }}
	<img src="/file/fc/showImg/{{d.photoPath}}" style="width: 30px;height: 60px;">
	{{# }}}
</script>
<script>

	layui.use(['table','form','layer'],function(){
		var table = layui.table,form = layui.form,
				layer = layui.layer;

		//加载表格
		table.render({
			elem:'#memberTable',
			height:'full-160',
			page:true,
			toolbar:'#tableBar',
			url:'/system/mc/find',
			cols:[
				[
					{type:'numbers',fixed:'left',style:'height:70px'},
					{type:'checkbox',fixed:'left'},
					{field:'userName',title:'名称',width:150},
					{field:'loginName',title:'登录账号',width:150},
					{field:'state',title:'是否可用',width:180,templet:'#switchState'},
					{field:'photoPath',title:'头像',width:80,templet: '#photo',align: 'center'},
					{field:'roleIds',title:'角色名称'},
					{field:'createTime',title:'创建时间',width:250},
					{fixed:'right',title:'操作',width:150,align:'center',toolbar:'#tool'},
				]
			]
		})

		//监听搜索按钮
		form.on('submit(searchBtn)',function(data){
			var dataForm = data.field;
			console.log(dataForm);
		})

		var active = {
			addOrUpdate:function (content) {
				var b = false;
				top.layer.open({
					type:2,
					content:content,
					area:['700px','650px'],
					btn:['确认保存','取消关闭'],
					btn1:function (i,o) {
						b = true;
						o.find('iframe')[0].contentWindow.btnSubmit();
					},
					end:function () {
						if(b) layui.table.reload('memberTable');
					}
				})
			}
		}

		table.on('toolbar(memberTable)',function (obj) {
			var event = obj.event;
			if("add" == event){
				active.addOrUpdate('/page/system/memberAdd');
			}
		})

		table.on('tool(memberTable)',function (obj) {
			var event = obj.event;
			if("edit" == event){
				active.addOrUpdate('/page/system/memberEdit/'+obj.data.id);
			}
		})

	});
</script>
</body>
</html>
